// ImageDisplay.tsx
import React from 'react';
import { Card, Button, Space } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
import { useState } from 'react';

interface ImageDownloadState {
    imageUrl: string;
}

function useImageDownload(imageUrl: string) {
    const [state, setState] = useState<ImageDownloadState>({ imageUrl });

    const handleDownload = () => {
        const a = document.createElement('a');
        a.href = state.imageUrl;
        a.download = 'image.jpg'; // 设置下载文件的默认名称
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    };

    return { ...state, handleDownload };
}

interface ImageDisplayProps {
    imageUrl: string;
}

const ImageDisplay: React.FC<ImageDisplayProps> = ({ imageUrl }) => {
    const { handleDownload } = useImageDownload(imageUrl);

    return (
        <Card style={{ width: '100%', maxWidth: 800, margin: 'auto' }}>
            <img src={imageUrl} alt="display" style={{ width: '100%', height: 'auto' }} />
            <div style={{ textAlign: 'center', marginTop: 10 }}>
                <Button type="primary" onClick={handleDownload} icon={<DownloadOutlined />}>
                    下载
                </Button>
            </div>
        </Card>
    );
};

export default ImageDisplay;